import React from 'react';
import { inject, observer } from 'mobx-react';
import { Route, withRouter, Redirect ,Switch} from 'react-router-dom';
import { ListViewPage, RouteLayout } from 'weaver-mobile-page';
import MeetingUtil from '../../util/meetingUtil';
import { Tools } from 'weaver-mobile';
import Detail from '../detail/index'
let getLabel = Tools.getLabel
@inject('roomPlanStore')
@inject('viewMeetingStore')
@withRouter
@observer
class RoomUsedDetail extends React.Component {
  componentDidMount() {
    window.em&&window.em.checkJsApi('changeTitle') && window.em.changeTitle({title:getLabel(15881, '会议室使用情况')})

  }
  render() {
    const { roomPlanStore } = this.props;
    const { list } = roomPlanStore;
    let roomname = list && list.data && list.data[0] && list.data[0].roomname;
    const listHeight = this.getHeight();
    return (
      <div className='useDetail'>
        <div className='useDetail-header' >
          <span>{roomname}</span>
        </div>
        <div>
          <ListViewPage.Normal
            getDataCustom={true}
            store={list}
            heightSpace={47}
            customHeight={listHeight}
            onRowClick={this.viewDetail}
          />
        </div>
        <Switch>
          <Route
            key="detailinfo"
            path="/calendar/allMeeting/report/roomPlan/roomUsedDetail/detailinfo"
            render={()=>(
              <RouteLayout>
                <div key="calendarDetailDiv" className="wm-route-layout wm-demo-route-layout-page">
                  <Detail roomUsed='roomUsedList' />
                </div>
              </RouteLayout>
            )}
          />
        </Switch>
      </div>
    )
  }

  getHeight = () => {
    return document.body.clientHeight + MeetingUtil.getTabHeight() - 48;
  }

  viewDetail = (rowData) => {
    const { history, viewMeetingStore} = this.props;
    const {setState} = viewMeetingStore;
    setState({meetingId: rowData.meetingid});
    history.push({pathname:`/calendar/detail`,query:{meetingid:rowData.meetingid,type:'view'}});
    return;
  }

}

export default RoomUsedDetail;